<template>
  <div class="page-content">
    <hy-table
      :list-data="list"
      v-bind="contentTableConfig"
      v-model="contentTableConfig.pageInfo"
      @selectionChange="selectionChange"
      ref="hyTable"
    >
      <!-- header中的插槽 -->
      <template #headerHandlerLeft>
        <slot name="headerHandlerLeft"></slot>
      </template>
      <template #headerHandler>
        <slot name="headerHandler"></slot>
      </template>
      <!-- 列中的插槽 -->
      <!-- 2.列中的插槽 -->
      <template #status="scope">
        <el-button
          plain
          size="mini"
          :type="scope.row.status ? 'success' : 'danger'"
        >
          {{ scope.row.status ? '启用' : '禁用' }}
        </el-button>
      </template>
      <template #add_time="scope">
        {{ parseTime(scope.row.add_time * 1000) }}
      </template>
      <template #register_time="scope">
        {{ parseTime(scope.row.register_time * 1000) }}
      </template>
      <template #login_time="scope">
        {{ parseTime(scope.row.login_time * 1000) }}
      </template>
      <!-- <template #updateAt="scope">
        {{ scope.row.add_time }}
      </template> -->

      <template #handler="scope">
        <el-button
          icon="el-icon-edit"
          size="mini"
          type="text"
          @click="handleEditClick(scope.row)"
          v-if="contentTableConfig.editBtn"
          >编辑</el-button
        >
        <el-button
          icon="el-icon-delete"
          size="mini"
          type="text"
          v-if="contentTableConfig.deleteBtn"
          @click="handleDeleteClick(scope.row)"
          >删除</el-button
        >
        <slot name="btnBox" :row="scope.row"></slot>
      </template>

      <!-- 在page-content中动态插入剩余插槽 -->
      <template v-for="item in otherPropSlots" #[item.slotName]="scope">
        <template v-if="item.slotName">
          <slot :name="item.slotName" :row="scope.row"></slot>
        </template>
      </template>
    </hy-table>
  </div>
</template>

<script>
import HyTable from '@/base-ui/table'
import util from '@/libs/util'
export default {
  components: {
    HyTable
  },
  props: {
    contentTableConfig: {
      type: Object,
      require: true
    },
    list: {
      type: Array,
      require: true
    },
    pageName: {
      type: String,
      required: true
    }
    // pageInfo: {
    //   type: Object,
    //   defualt: () => ({ currentPage: 0, pageSize: 10 })
    // }
  },
  data: function () {
    return {
      selectList: [],
      parseTime: util.parseTime
      // pageInfo: { currentPage: 1, pageSize: 10 },
      // dataCount: 0
    }
  },
  computed: {
    otherPropSlots() {
      return this.contentTableConfig.propList.filter((item) => {
        if (item.slotName === 'status') return false
        if (item.slotName === 'createAt') return false
        if (item.slotName === 'updateAt') return false
        if (item.slotName === 'handler') return false
        if (item.slotName === 'add_time') return false
        if (item.slotName === 'register_time') return false
        if (item.slotName === 'login_time') return false
        return true
      })
    }
  },
  methods: {
    selectionChange(val) {
      this.selectList = val
    },
    handleNewClick() {
      this.$emit('newBtnClick')
    },
    handleEditClick(item) {
      this.$emit('editBtnClick', item)
    },
    handleDeleteClick(item) {
      this.$emit('deleteClick', item)
    }
    // handleCurrentChange() {
    //   // 页码重置为1
    //   this.$refs.hyTable.handleCurrentChange(1)
    // }
  }
}
</script>
